{% extends "base.html" %}
{% block content %}
<div class="container mt-4">
    <h2 class="mb-4">预约 {{ room.name }}</h2>
    <div class="booking-card card shadow">
        <div class="card-body">
            <form method="POST" novalidate>
                {{ form.hidden_tag() }}
                
                <!-- 姓名 -->
                <div class="form-group">
                    {{ form.name.label(class="form-label") }}
                    {{ form.name(class="form-control" + (' is-invalid' if form.name.errors else '')) }}
                    {% for error in form.name.errors %}
                    <div class="invalid-feedback">{{ error }}</div>
                    {% endfor %}
                </div>

                <!-- 学号 -->
                <div class="form-group">
                    {{ form.student_id.label(class="form-label") }}
                    {{ form.student_id(class="form-control" + (' is-invalid' if form.student_id.errors else '')) }}
                    {% for error in form.student_id.errors %}
                    <div class="invalid-feedback">{{ error }}</div>
                    {% endfor %}
                </div>

                <!-- 日期选择 -->
                <div class="form-group">
                    {{ form.date.label(class="form-label") }}
                    <input type="date" 
                           name="date"
                           class="form-control {{ 'is-invalid' if form.date.errors }}"
                           min="{{ min_date }}"
                           max="{{ max_date }}"
                           value="{{ form.date.data.strftime('%Y-%m-%d') if form.date.data else min_date }}"
                           required>
                    {% for error in form.date.errors %}
                    <div class="invalid-feedback">{{ error }}</div>
                    {% endfor %}
                </div>

                <!-- 时间选择 -->
                <div class="row g-3 time-picker-group">
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form.start_time.label(class="form-label") }}
                            <input type="time" 
                                   name="start_time"
                                   class="form-control {{ 'is-invalid' if form.start_time.errors }}"
                                   min="08:00"
                                   max="22:00"
                                   step="900"
                                   value="{{ form.start_time.data.strftime('%H:%M') if form.start_time.data else '' }}"
                                   required
                                   onchange="updateTimeConstraints()">
                            {% for error in form.start_time.errors %}
                            <div class="invalid-feedback">{{ error }}</div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form.end_time.label(class="form-label") }}
                            <input type="time"
                                   name="end_time" 
                                   class="form-control {{ 'is-invalid' if form.end_time.errors }}"
                                   min="08:00"
                                   max="22:00"
                                   step="900"
                                   value="{{ form.end_time.data.strftime('%H:%M') if form.end_time.data else '' }}"
                                   required>
                            {% for error in form.end_time.errors %}
                            <div class="invalid-feedback">{{ error }}</div>
                            {% endfor %}
                        </div>
                    </div>
                </div>

                <!-- 用途 -->
                <div class="form-group">
                    {{ form.purpose.label(class="form-label") }}
                    {{ form.purpose(class="form-control" + (' is-invalid' if form.purpose.errors else ''), rows=4) }}
                    {% for error in form.purpose.errors %}
                    <div class="invalid-feedback">{{ error }}</div>
                    {% endfor %}
                </div>

                <!-- 操作按钮 -->
                <div class="form-group mt-4">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-check-circle me-2"></i>提交预约
                    </button>
                    <a href="{{ url_for('index') }}" class="btn btn-outline-secondary w-100 mt-2">
                        <i class="bi bi-arrow-left me-2"></i>返回列表
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function updateTimeConstraints() {
    const dateInput = document.querySelector('input[type="date"]');
    const startTimeInput = document.querySelector('input[name="start_time"]');
    const endTimeInput = document.querySelector('input[name="end_time"]');
    const now = new Date();
    
    // 如果选择的是今天
    if (dateInput.value === new Date().toISOString().split('T')<source_id data="0" title="app.py" />) {
        // 计算最小时间（当前时间+15分钟）
        const minTime = new Date(now.getTime() + 15*60000);
        const minHours = minTime.getHours().toString().padStart(2, '0');
        const minMinutes = (Math.ceil(minTime.getMinutes()/15)*15 % 60)
                         .toString().padStart(2, '0');
        
        // 设置最小时间
        startTimeInput.min = `${minHours}:${minMinutes}`;
        startTimeInput.value = startTimeInput.min;
        
        // 如果当前时间接近22:00，调整最大值
        if (minTime.getHours() >= 21) {
            startTimeInput.max = '21:45';
        }
    } else {
        startTimeInput.min = '08:00';
        startTimeInput.max = '22:00';
    }
    
    // 同步结束时间的最小值
    endTimeInput.min = startTimeInput.value;
    if (endTimeInput.value < endTimeInput.min) {
        endTimeInput.value = endTimeInput.min;
    }
    
    // 自动计算结束时间（+1小时）
    const startParts = startTimeInput.value.split(':');
    const startDate = new Date();
    startDate.setHours(startParts<source_id data="0" title="app.py" />, startParts<source_id data="1" title="config.py" />, 0);
    const endDate = new Date(startDate.getTime() + 60*60000);
    const endHours = endDate.getHours().toString().padStart(2, '0');
    const endMinutes = endDate.getMinutes().toString().padStart(2, '0');
    
    if (endTimeInput.value === '') {
        endTimeInput.value = `${endHours}:${endMinutes}`;
    }
}
</script>
{% endblock %}
